import React, { useRef, useState, memo, useEffect } from 'react'
import { Head, CommentBox, Content, } from './style';
import {forceCheck} from 'react-lazyload'
import './icon.css'
import './icon2.css'
import header from '../../assets/images/logo.png'
import Scroll from '../../baseUI/scroll/index'
import Evacontent from './Evacontent'
import { useHistory } from 'react-router-dom';

const HeaderComponent = (props) => {
    const putRef = useRef()
    console.log(props, '/////');
    let { data, handleShare } = props;
    const [res, setRes] = useState(data.evaluate);
    const history = useHistory();
    const handleback = () => {
        history.go(-1)
    }
    const putcomment = () => {

        if (putRef.current.value === '') {
            alert('评论不能为空！')
        } else {
            console.log(putRef.current.value);
            data.evaluate = [
                ...data.evaluate,
                { imgsrc: header, name: 'guazi', comments: putRef.current.value, light: 0, smile: 0 }
            ]
            // console.log(data.evaluate,'33333333333');
            setRes(data.evaluate)
            putRef.current.value = ''
        }

    }


    useEffect(() => {
        setRes(data.evaluate)
    }, [data.evaluate])

    return (
        <>
            {/* 页顶 */}
            <Head >
                <div className="leftimg " onClick={handleback}>
                    <div className="Header-iconfont Header-icon-fanhui"></div>
                </div>
                <span>{data.hupuaddress}</span>
                <div className="share" onClick={handleShare}>
                    <div className="Header-iconfont Header-icon-fenxiang1"></div>
                </div>
            </Head>


            {/* 中间页面 */}
            <div className='big'>
                <Scroll
                    direction={"vertical"}
                    refresh={true}
                    onScroll = {forceCheck}
                >
                    <div className='ht-all'>
                        <Content>
                            <div className="keep"></div>
                            <div className="speech">
                                <div className="speech-title">
                                    {data.title}
                                </div>
                                <div className="speech-author">
                                    <img src={data.imgsrc} className='author-pic' />
                                    <div className='author-name'>
                                        <p className='name'>{data.name}</p>
                                    </div>
                                    <div className='follow'>&nbsp;+&nbsp;关注</div>
                                </div>
                                <div className="speech-content">
                                    <div className='above'>
                                        {data.comments}
                                    </div>
                                    <div className='below'>
                                        <p className='b-left'>阅读数: {data.number4}</p>
                                        <div className='b-right'>送礼</div>
                                    </div>
                                </div>
                            </div>
                            <div className='apart'></div>
                            <div className="evaluate">
                                <div className="evaluate-head">
                                    <div className="left">
                                        全部回复
                                    </div>
                                    <div className="right">
                                        <div className="CommentBox-iconfont CommentBox-icon-paixu"></div>
                                        亮度排行
                                    </div>
                                </div>
                                <div className="evaluate-content">
                                    {/* <Evacontent evaluate={data.evaluate}/> */}
                                    {
                                        res.map((item, index) => {
                                            return <Evacontent
                                                item={item}
                                                key={index}
                                            />
                                        })
                                    }
                                </div>
                                <div className="keepbottom"></div>
                            </div>
                        </Content>
                    </div>
                </Scroll>
            </div>

            {/* 评论框 */}
            <CommentBox>
                <div className="input">
                    <input type="text" className='inputbig' ref={putRef} placeholder='我来评论...'/>
                    <div className="face">
                        <div className="" onClick={putcomment}>Yes</div>
                    </div>
                </div>
                <div className="CommentBox-iconfont CommentBox-icon-pinglun">
                    <p className='icon1'>{data.number}</p>
                </div>
                <div className="CommentBox-iconfont CommentBox-icon-dianzan">
                    <p className='icon2'>{data.number2}</p>
                </div>
                <div className="CommentBox-iconfont CommentBox-icon-fenxiang">
                    <p className='icon3'>{data.number3}</p>
                </div>
            </CommentBox>
        </>
    )
}


export default HeaderComponent